<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>

<body>
    <!-- 
    表单标签应用的场景
    登录/注册/手机用户信息/搜索...
    常用的标签：输入框/单选/多选/下拉框 
    -->
    <form action="#">
        <div>
            <span>姓名：
                <input user="username" type="text" placeholder="请输入姓名">
            </span>
        </div>
        <div>
            <span>密码：</span>
            <input name="password" type="password" placeholder="请输入密码">
        </div>
        <div>
            <span>性别：</span>
            <input name="gender" type="radio" value="男">男
            <input name="gender" type="radio" value="女">女
        </div>
        <div>
            <span>爱好：</span>
            <input name="hobby" type="checkbox" value="篮球">篮球
            <input name="hobby" type="checkbox" value="足球">足球
            <input name="hobby" type="checkbox" value="网球">网球
            <input name="hobby" type="checkbox" value="羽毛球">羽毛球
        </div>
        <div>
            <span>出生日期：</span>
            <input name="birthday" type="date" placeholder="请选择出生日期">
        </div>
        <div>
            <span>自我介绍：</span>
            <textarea name="intro" placeholder="请描述你的有点"></textarea>
        </div>
        <div>
            <!-- <button>提交</button>
            <button>重置</button> -->
            <input type="submit" value="提交信息">
            <input type="reset"  value="重置表单">
        </div>
    </form>
</body>

</html>